:root {
    --bs-primary: #005b8d;               /* Primary color */
    --bs-primary-light: #0077a3;         /* Primary color (lighter) */
    --bs-primary-dark: #003d6a;          /* Primary color (darker) */
    --bs-secondary: #0077a3;             /* Secondary color */
    --bs-success: #28a745;               /* Success color */
    --bs-warning: #ffc107;               /* Warning color */
    --bs-danger: #dc3545;                /* Danger color */
    --bs-light: #f0f0f0;                 /* Light color */
    --bs-dark: #404040;                  /* Dark color */
    --bs-background: #ffffff;            /* Background color */
    --bs-text: #333333;                  /* Text color */
    --bs-primary-rgb: 0, 91, 141;          /* #005b8d */
    --bs-primary-light-rgb: 0, 119, 163;   /* #0077a3 */
    --bs-primary-dark-rgb: 0, 61, 106;     /* #003d6a */
    --bs-secondary-rgb: 0, 119, 163;       /* #0077a3 */
    --bs-success-rgb: 40, 167, 69;         /* #28a745 */
    --bs-warning-rgb: 255, 193, 7;         /* #ffc107 */
    --bs-danger-rgb: 220, 53, 69;          /* #dc3545 */
    --bs-light-rgb: 240, 240, 240;         /* #f0f0f0 */
    --bs-dark-rgb: 64, 64, 64;             /* #404040 */
    --bs-background-rgb: 255, 255, 255;    /* #ffffff */
    --bs-text-rgb: 51, 51, 51;             /* #333333 */
}

/* Buttons. */
.dxbl-btn-primary:where(:not(.dxbl-btn-standalone)) {
    --dxbl-btn-bg: #005b8d;
    --dxbl-btn-border-color: #003d61;
    --dxbl-btn-color: #ffffff;
    --dxbl-btn-active-bg: #004577;
    --dxbl-btn-active-color: #ffffff;
    --dxbl-btn-active-border-color: #003659;
    --dxbl-btn-hover-bg: #004d85;
    --dxbl-btn-hover-color: #ffffff;
    --dxbl-btn-hover-border-color: #003f6e;
    --dxbl-btn-disabled-bg: #7fa8c3;
    --dxbl-btn-disabled-color: #ffffff;
    --dxbl-btn-disabled-border-color: #7fa8c3;
    --dxbl-btn-disabled-opacity: 1;
    --dxbl-btn-focus-shadow-color: rgba(0, 91, 141, 0.5);
    --dxbl-btn-focus-shadow-spread: 0.125rem;
    --dxbl-btn-focus-shadow-blur: 0rem;
}

.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
    --dxbl-btn-bg: #005b8d;
    --dxbl-btn-color: var(--dxbl-pager-active-page-btn-color);
    --dxbl-btn-disabled-bg: #005b8d;
    --dxbl-btn-disabled-color: var(--dxbl-pager-active-page-btn-color);
    --dxbl-btn-disabled-background: none;
    --dxbl-pager-page-btn-hover-bg: #005b8d;
    --dxbl-pager-page-btn-hover-color: #fff;
    cursor: default;
}

/* Login Button. */
.dxbl-btn-standalone.dxbl-btn-primary {
    --dxbl-btn-color: rgb(255, 255, 255);
    --dxbl-btn-bg: #005b8d;
    --dxbl-btn-border-color: #005b8d;
    --dxbl-btn-active-bg: #004577;
    --dxbl-btn-active-color: rgb(255, 255, 255);
    --dxbl-btn-active-border-color: #003d61;
    --dxbl-btn-hover-bg: #00527e;
    --dxbl-btn-hover-color: rgb(255, 255, 255);
    --dxbl-btn-hover-border-color: #00527e;
    --dxbl-btn-disabled-bg: #a0bccd; 
    --dxbl-btn-disabled-color: rgb(255, 255, 255); 
    --dxbl-btn-disabled-border-color: #a0bccd; 
    --dxbl-btn-focus-outline-size: 0.125rem;
    --dxbl-btn-focus-outline-offset: 0.063rem;
    --dxbl-btn-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    --dxbl-btn-focus-bg: #00527e;
    --dxbl-btn-focus-color: rgb(255, 255, 255);
    --dxbl-btn-focus-border-bg: #005b8d;
    --dxbl-btn-focus-outline-color: #00527e;
}

/* TreeView. */
.dxbl-treeview {
    --dxbl-treeview-btn-color: #005b8d;
    --dxbl-treeview-btn-hover-bg: #00497b;
    --dxbl-treeview-btn-hover-color: #ffffff;
    --dxbl-treeview-navigation-filter-content-bg-color: #f0f8ff;
    --dxbl-treeview-navigation-filter-content-color: #005b8d;
    --dxbl-treeview-check-all-border-bottom-color: #005b8d;
    --dxbl-treeview-item-selection-bg: #005b8d;
    --dxbl-treeview-item-selection-color: #ffffff;
    --dxbl-treeview-item-selection-focused-color: #005b8d;
    --dxbl-treeview-checkbox-checked-bg: #005b8d;
    --dxbl-treeview-checkbox-checked-hover-bg: #00497b;
    --dxbl-treeview-checkbox-disabled-bg: #e0e0e0;
    --dxbl-treeview-checkbox-disabled-color: #8a8a8a;
    --dxbl-treeview-checkbox-unchecked-hover-bg: #e6f3f8;
    --dxbl-treeview-checkbox-unchecked-hover-border-color: #005b8d;
    --dxbl-treeview-item-focus-outline-color: #80c2e3;
    --dxbl-treeview-checkbox-readonly-border-color: #005b8d;
}

/* TextBox. */
.dxbl-text-edit {
    --dxbl-text-edit-focus-border-color: #005b8d;
}

/* Grid Borders. */
.dxbl-grid {
    --dxbl-grid-focus-frame-color: #005b8d;
}

/* Calendar Borders. */
.dxbl-calendar {
    --dxbl-calendar-today-border-color: #005b8d;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgb(0 91 141) !important;
}

/* Grid "Employee"*/
a {
    color: rgb(0 91 141);
    text-decoration: underline;
}

/* CheckBoxes. */
.dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: #005b8d;
    --dxbl-checkbox-check-element-unchecked-hover-bg: #e3f2fd;
    --dxbl-checkbox-check-element-unchecked-border-color: unset;
    --dxbl-checkbox-check-element-unchecked-hover-border-color: unset;
    --dxbl-checkbox-switch-checked-bg: #005b8d;
    --dxbl-checkbox-switch-unchecked-hover-bg: #e3f2fd;
    --dxbl-checkbox-radio-hover-bg: #e3f2fd;
    --dxbl-checkbox-radio-checked-border-color: #005b8d;
    --dxbl-checkbox-radio-unchecked-border-color: unset;
    --dxbl-checkbox-radio-unchecked-hover-border-color: unset;
    --dxbl-checkbox-radio-check-bg: #005b8d;
    --dxbl-checkbox-check-element-checked-hover-bg: #004080;
    --dxbl-checkbox-switch-checked-hover-bg: #004080;
    --dxbl-checkbox-radio-checked-hover-bg: #004080;
    --dxbl-checkbox-radio-checked-hover-border-color: #004080;
    --dxbl-checkbox-checked-focus-shadow-color: rgba(0, 91, 141, 0.5);
    --dxbl-checkbox-unchecked-focus-shadow-color: rgba(0, 91, 141, 0.5);
}

/* Login. */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 78vh;
    background: white;
}

.login-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.login-left {
    width: 100%;
    background: linear-gradient(135deg, #005481 0%, #006488 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.login-right {
    width: 115%;
    padding: 3rem;
}

.login-icon {
    width: 80%;
    max-width: 240px;
    margin-bottom: 1rem;
}

.login-caption {
    color: #005b8d;
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
    font-family: "New Amsterdam", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.demo-text {
    font-size: 1rem; 
    color: #333333;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.login-group {
    margin-bottom: 1rem;
}

.dx-textbox {
    width: 100%;
    padding: 0.75rem; 
    font-size: 1rem;
    border: 1px solid #cccccc;
    border-radius: 4px; 
}

.login-button {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    color: #ffffff;
    background: linear-gradient(135deg, #005481 0%, #0077a3 100%);
    border: none;
    border-radius: 4px;
    font-weight: 500;
}

.validation-msg {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 1rem;
    text-align: center;
}

/* Responsiveness. */
@media (min-width: 768px) {
    .login-card {
        flex-direction: row; 
        max-width: 800px;

    }
    .dx-textbox {
        font-size: 0.875rem;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .login-right {
        padding: 1rem;
    }

    .login-caption {
        font-size: 2rem;
        text-align: start;
    }

    .dx-textbox {
        font-size: 0.875rem;
    }

    .login-button {
        font-size: 0.875rem;
    }

    .login-right {
        width: 100%;
    }
}